﻿@using Mes5GService.Web.Resources

@inject IWebResourceManager WebResourceManager
@{
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/morris.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/raphael.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.flot.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.waypoints.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.counterup.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/topojson.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.easypiechart.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/chartist.min.js");
}

<div class="card card-custom GeneralStatsContainer h-100">
    <div class="card-header align-items-center border-0 mt-4">
        <h3 class="card-title align-items-start flex-column">
            <span class="font-weight-bolder text-dark">General Stats</span>
        </h3>
        <div class="card-toolbar">
            <button id="refresh-send-attempts-btn" id="generalStatsReload" class="btn btn-outline-brand btn-sm btn-icon btn-icon-md">
                <i class="flaticon2-refresh"></i>
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="easy-pie-chart-loading col-lg-12" style="position: absolute; text-align: center; z-index: 999;">
            <div class="kt-blockui" style="display:inline-block">
                <span>Loading...</span>
                <span>
                    <div class="kt-loader m-loader--brand"></div>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="easy-pie-chart">
                    <div class="number transactions" id="transactionPercent" data-percent="0">
                        +<span id="transactionPercent">...</span>%
                    </div>
                    <a class="title" href="javascript:;">
                        Transactions
                        <i class="icon-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="margin-bottom-10 visible-sm"> </div>
            <div class="col">
                <div class="easy-pie-chart">
                    <div class="number visits" id="newVisitPercent" data-percent="0">
                        +<span>...</span>%
                    </div>
                    <a class="title" href="javascript:;">
                        New Visits
                        <i class="icon-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="margin-bottom-10 visible-sm"> </div>
            <div class="col">
                <div class="easy-pie-chart">
                    <div class="number bounce" id="bouncePercent" data-percent="0">
                        -<span>...</span>%
                    </div>
                    <a class="title" href="javascript:;">
                        Bounce
                        <i class="icon-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>